.homePage-graph {
  background-color: #1a1d1e;
  min-width: 1200px;
  height: 100vh;

  .container {
    width: 100%;
    height: 100%;
    position: relative;

    .hide-anchor {
      display: inline-block;
      width: 0.0625rem;
      height: 0.0625rem;
      border-radius: 100%;
      background-color: red;
      position: absolute;
      z-index: 50;
      // visibility: hidden;
      &.mobile-anchor {
        left: 8rem;
        top: 1.95rem;
      }
      &.mobile-success-anchor {
        left: 14.375rem;
        top: 5rem;
      }
      &.hub-anchor {
        left: 5.6875rem;
        top: 8.375rem;
      }
      &.mca-anchor {
        left: 9.625rem;
        top: 7.5625rem;
      }
      &.product-microService-anchor {
        left: 8.8125rem;
        top: 7.625rem;
      }
    }

    .mobile-channel,
    .teller-channel {
      .step {
        position: absolute;
        z-index: 40;
        font-size: 0.15rem;
        line-height: 0.2rem;
        .icon {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .step-title {
          position: absolute;
          color: #fff;
          left: 0;
          top: -0.225rem;
          width: 1.25rem;
        }
        //mobile
        &.mobile {
          width: 2.425rem;
          height: 2.95rem;
          left: 6.875rem;
          top: 0.1875rem;
          .step-title {
            width: 1.25rem;
            left: 0.5125rem;
            top: 0.7625rem;
          }
        }
        &.login {
          left: 8.625rem;
          top: 2.125rem;
          .step-title {
            width: 0.875rem;
            left: -0.225rem;
            top: -0.1875rem;
          }
        }
        &.selectCD {
          left: 9.5625rem;
          top: 2.5625rem;
          .step-title {
            width: 0.9375rem;
            left: -0.225rem;
            top: -0.1875rem;
          }
        }
        &.viewProdList {
          left: 10.5rem;
          top: 3rem;
          .step-title {
            width: 1rem;
            left: -0.2875rem;
            top: -0.375rem;
          }
        }
        &.inputDepositAmount {
          left: 11.4375rem;
          top: 3.4375rem;
          .step-title {
            width: 1rem;
            left: -0.2875rem;
            top: -0.375rem;
          }
        }
        &.selectDepositTerm {
          left: 12.375rem;
          top: 3.875rem;
          .step-title {
            width: 1rem;
            left: -0.2875rem;
            top: -0.375rem;
          }
        }
        &.reqOpenCD {
          left: 13.3125rem;
          top: 4.3125rem;
          .step-title {
            width: 1rem;
            left: -0.2875rem;
            top: -0.375rem;
          }
        }
        &.success {
          left: 14.25rem;
          top: 4.75rem;
          .step-title {
            width: 0.875rem;
            left: -0.225rem;
            top: -0.1875rem;
          }
        }

        //teller
        &.teller {
          width: 2.175rem;
          height: 2.5125rem;
          left: 8.8125rem;
          top: -0.3125rem;
          .step-title {
            width: 1.05rem;
            left: 0.5125rem;
            top: 0.4625rem;
          }
        }
        &.inputCustInfo {
          left: 10.75rem;
          top: 1.5625rem;
          .step-title {
            left: -0.375rem;
            top: -0.375rem;
          }
        }
        &.selectTermAndAmount {
          left: 11.725rem;
          top: 2.025rem;
          .step-title {
            width: 1.1rem;
            left: -0.3rem;
            top: -0.575rem;
          }
        }
        &.inputAccountInfo {
          left: 12.65rem;
          top: 2.4875rem;
          .step-title {
            left: -0.375rem;
            top: -0.375rem;
          }
        }
        &.reviewAndApproval {
          left: 13.6rem;
          top: 2.95rem;
          .step-title {
            left: -0.375rem;
            top: -0.375rem;
          }
        }
        &.requestOpenCD {
          left: 14.55rem;
          top: 3.4125rem;
          .step-title {
            width: 1rem;
            left: -0.3rem;
            top: -0.375rem;
          }
        }
        &.tellerSuccess {
          left: 15.5rem;
          top: 3.875rem;
          .step-title {
            width: 0.875rem;
            left: -0.225rem;
            top: -0.1875rem;
          }
        }
      }
      .stepPoint {
        width: 0.3875rem;
        height: 0.3375rem;
      }
    }

    .microservice {
      position: absolute;
      z-index: 40;
      font-size: 0.1rem;
      line-height: 0.15rem;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .step-title {
        position: absolute;
        color: #fff;
        left: 0;
        top: -0.225rem;
        width: 1.25rem;
      }
      &.mca {
        width: 3.825rem;
        height: 4.75rem;
        left: 9.025rem;
        top: 3.9375rem;
      }
      &.product {
        width: 2.975rem;
        height: 3.025rem;
        left: 7rem;
        top: 5.9375rem;
        .step-title {
          width: 0.875rem;
          left: 1.0625rem;
          top: 0.95rem;
        }
      }
      &.customer {
        width: 2.8875rem;
        height: 3.0125rem;
        left: 8.1875rem;
        top: 6.6rem;
        .step-title {
          width: 0.875rem;
          left: 1.0375rem;
          top: 0.975rem;
        }
      }
      &.deposit {
        width: 2.9625rem;
        height: 3.025rem;
        left: 10.4375rem;
        top: 6.8125rem;
        .step-title {
          width: 0.875rem;
          left: 1.0625rem;
          top: 0.9625rem;
        }
      }
      &.posting {
        width: 2.975rem;
        height: 3.0375rem;
        left: 11.75rem;
        top: 6.1rem;
        .step-title {
          width: 0.875rem;
          left: 1.0375rem;
          top: 0.9rem;
        }
      }
    }

    .downstream {
      position: absolute;
      z-index: 40;
      font-size: 0.1rem;
      line-height: 0.15rem;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .step-title {
        position: absolute;
        color: #fff;
        left: 0;
        top: -0.225rem;
        width: 1.25rem;
      }
      &.hub {
        width: 3.0875rem;
        height: 3.15rem;
        left: 4.1875rem;
        top: 6.875rem;
        .step-title {
          width: 1.75rem;
          left: 0.625rem;
          top: 0.8125rem;
        }
      }
      &.crs {
        width: 2.775rem;
        height: 2.85rem;
        left: 6.5rem;
        top: 7.875rem;
        .step-title {
          width: 1.75rem;
          left: 0.4375rem;
          top: 0.8125rem;
        }
      }
      &.wealth {
        width: 2.9125rem;
        height: 3.025rem;
        left: 11rem;
        top: 8.625rem;
        .step-title {
          width: 1.75rem;
          left: 0.5rem;
          top: 0.875rem;
        }
      }
      &.fatca {
        width: 2.6375rem;
        height: 2.9875rem;
        left: 12.875rem;
        top: 7.75rem;
        .step-title {
          width: 1.75rem;
          left: 0.4375rem;
          top: 0.8125rem;
        }
      }
      &.tfms {
        width: 3.4875rem;
        height: 3.4125rem;
        left: 14.125rem;
        top: 7.0625rem;
        .step-title {
          width: 1.75rem;
          left: 0.75rem;
          top: 1.1625rem;
        }
      }
    }

    .topBg {
      width: 13.075rem;
      height: auto;
      position: absolute;
      left: 5.925rem;
      top: -0.1875rem;
      z-index: 30;
    }

    .mcaLayerBg {
      width: 8.475rem;
      height: auto;
      position: absolute;
      left: 6.7875rem;
      top: 5.3125rem;
      z-index: 20;
    }

    .bottomBg {
      width: 14.8875rem;
      height: auto;
      position: absolute;
      left: 3.625rem;
      top: 4.375rem;
      z-index: 10;
    }
  }

  .jtk-connector,
  .jtk-endpoint {
    z-index: 40;
  }
}
